<template>
  <p class="title">最受好评的电影</p>
  <div class="cardbox">
    <div class="cardlittle">
      <CardView
        v-for="(banners, index) in hots"
        :key="banners.id"
        :banners="banners" @click="$router.push({ path: '/caseinfoeditor',query:{id:banners.id} })"
      ></CardView>
      <!-- @click="$router.push({ path: '/caseinfoeditor', query: { id: banners.id } })"@click="gotoDetail(banners.id) -->
    </div>
  </div>
  <div class="gang"></div>
  <MvView
    v-for="(banners, index) in hots"
    :key="banners.id"
    :banners="banners"
  ></MvView>
</template>

<script setup>
import { ref } from "vue";
import CardView from "@/components/CardView.vue";
import MvView from "@/components/MvView.vue";

import { useRouter, useRoute } from "vue-router";

import { storeToRefs } from "pinia";
import { useHotStore } from "@/stores/hot.js";

const store = useHotStore();
const { hots } = storeToRefs(store);
const {  updateHot } = store;

const clickHandler = (you) => {
  // console.log(you);
};
// console.log(hots);
updateHot();


const router = useRouter();
const route = useRoute();

const gotoDetail = (netType) => {
  // console.log(netType, router);
  router.push({ path: "/caseinfoeditor", query: { netType } });
};


</script>

<style lang="scss" scoped>
.title {
  padding-left: 15px;
  font-size: 14px;
  color: #575757;
  margin: 50px 0 12px;
}
.cardbox::-webkit-scrollbar {
  display: none;
}
.cardbox {
  width: 95vw;
  height: 160px;
  display: flex;
  margin: 10rem auto 0;
  background-color: #fff;
  text-align: center;
  overflow: auto;
  .cardlittle {
    display: flex;
  }
}
.gang {
  width: 100vw;
  border-bottom: 15rem solid #f5f5f5;
}
</style>
